<template>
    <div class="search">
       <!-- 搜索框 -->
    <form action="/">
  <van-search
    show-action
    placeholder="请输入搜索关键词"
    v-model="value"
    @search='onSearch'
    @cancel='onCancel'
  />
</form>
<ul  v-show='products.length===0'>
  <li class="history">
    <span v-for="history in hiStorys" :key="history.id" @click="getsss(history)" class="spana">{{history}}</span>
  </li>
</ul>
    <!-- 标签栏 -->
     <van-tabs class="van-tabs" v-show='products.length===0'>
      <van-tab :title="category.name"
       v-for="category in categories"
      :key="category.id"
       class="div1"
      :to="`/home/home-cat/${category.id}`"
      >
      </van-tab>
    </van-tabs>
    <!-- 加载搜索数据 -->
     <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="product in products"
        :key="product.id"
        :title="product.title"
        :thumb="product.image"
        @click-thumb="jumpToDetail(product.id)"
      >
        <template #desc>
          <div class="card-desc">{{product.rankingTag}}</div>
        </template>
        <template #tags>
          <div>全天热卖 NO.{{product.dataoke.dailyRanking}}</div>
          <div>
            <span>￥{{product.price | money}}</span>
            <span>原价：{{product.originPrice | money}}</span>
          </div>
        </template>
        <template #price>
          <van-tag v-if="product.couponValue" plain type="primary" color="#f00">{{product.couponValue}}</van-tag>
        </template>
      </van-card>
    </van-list>
    </div>

</template>

<script>
import { getSearch } from '@/api/search'
import { getCategories } from '@/api/category'

export default {
  name: 'Search',
  data() {
    return {
      value: '',
      active: 0, // 标签栏激活项索引
      categories: [], // 分类数据
      hiStorys: [],
      products: [], // 搜索商品数据
      loading: false, // 当前是否正在加载列表数据
      finished: false, // 所有列表数据是否加载完毕
      nextIndex: 0, // 列表数据加载时下一页数据起始索引
    }
  },
  created() {
    // 分类数据
    getCategories()
      .then(res => {
        this.categories = res.list
      })
      .catch(err => console.log('异常：', err))

    this.hiStorys = this.getSearchList()
  },
  methods: {
    onSearch(hiStorys) {
      // 接收并添加到本地localStorage
      const searchList = this.getSearchList()
      if (searchList.length >= 5) {
        // searchList.push(hiStorys)
        searchList.splice(0, 1)
      }
      searchList.push(hiStorys)
      localStorage.setItem('hiStorys', JSON.stringify(searchList))
      this.onLoad(hiStorys)
      this.value = ''
    },
    // 跳转到详情页面：编程式的导航
    jumpToDetail(id) {
      this.$router.push(`/detail?id=${id}`)
    },

    // 获取搜索关键字存储到本地localStorage并返回
    getSearchList() {
      const searchList = localStorage.getItem('hiStorys') || '[]'
      return JSON.parse(searchList)
    },
    // 发送请求加载搜索数据
    onLoad(hiStorys) {
      getSearch(hiStorys)
        .then(data => {
          // 更新数据
          // console.log(searchList)
          this.products = [...data.list, ...this.products]
          // this.products.push(...data.list)
          this.nextIndex = data.nextIndex
          // 更新列表中使用的变量
          this.loading = false
          this.finished = data.isEnd
          // }
        })
        .catch(err => console.log('异常：', err))
    },

    getsss(history) {
      // console.log(history)
      // 获取本地的搜索值并转为字符串再发送请求
      this.onLoad(JSON.stringify(history))
    },
    onCancel() {
      this.$router.back()
    },
  },

}
</script>

<style lang='less' scoped>
.history{
  display: flex;
  padding: 10px;
  justify-content: space-around;
}

 /deep/ .van-tabs{
   height: 300px;
  display: flex;
  flex-wrap: wrap;
}
  .div1{
    width: 40px;
  }
  .spana{
    background-color: #ccc;
    display:inline-block;
    border-radius: 10px;
  }
  .spana:hover{
    background-color: blue;
  }
</style>
